<template>
  <div class="foot">
    <p class="recommend">
      <span><img src="../img/list.png" alt="" />爱课介绍 </span>
    </p>
    <ul>
      <li><img src="../img/1.png" alt="" /></li>
      <li><img src="../img/2.png" alt="" /></li>
      <li><img src="../img/3.png" alt="" /></li>
    </ul>
    <p class="children">爱课，小朋友的第一堂哈佛课</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.foot {
  width: 100%;
  height: 330px;
<<<<<<< HEAD
=======
  margin: 30px 10px 0 10px;

>>>>>>> wangjiaojiao
  .recommend {
    height: 50px;
    font-size: 18px;

    img {
      display: inline-block;
      width: 28px;
      height: 30px;
    }
  }
  ul {
    display: flex;
    li {
      width: 100%;
      height: 100%;
      margin-right: 5px;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 5%;
      }
    }
  }
  .children {
    font-size: 14px;
    color: rgb(78, 77, 77);
    text-align: center;
<<<<<<< HEAD
    padding-top: 10px;
=======
    margin-top: 30px;
>>>>>>> wangjiaojiao
  }
}
</style>